<template>
  <div 
    :class="[
      'bx-statistic',
      'bx-glass',
      {
        [`bx-statistic--${size}`]: size
      }
    ]"
  >
    <div v-if="title || $slots.title" class="bx-statistic__title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="bx-statistic__content">
      <span v-if="prefix || $slots.prefix" class="bx-statistic__prefix">
        <slot name="prefix">{{ prefix }}</slot>
      </span>
      <span class="bx-statistic__value">
        <slot>{{ value }}</slot>
      </span>
      <span v-if="suffix || $slots.suffix" class="bx-statistic__suffix">
        <slot name="suffix">{{ suffix }}</slot>
      </span>
    </div>
    <div v-if="extra || $slots.extra" class="bx-statistic__extra">
      <slot name="extra">{{ extra }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BxStatistic',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    extra: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  }
}
</script>

<style scoped>
.bx-statistic {
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  padding: 16px;
  border-radius: var(--bx-radius-medium);
}

.bx-statistic__title {
  font-size: 14px;
  color: var(--bx-text-secondary);
  margin-bottom: 8px;
}

.bx-statistic__content {
  display: flex;
  align-items: baseline;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.bx-statistic__prefix {
  font-size: 18px;
  margin-right: 4px;
  color: var(--bx-text-tertiary);
}

.bx-statistic__suffix {
  font-size: 14px;
  margin-left: 4px;
  color: var(--bx-text-tertiary);
}

.bx-statistic__extra {
  font-size: 12px;
  color: var(--bx-text-tertiary);
}

/* Size variations */
.bx-statistic--small .bx-statistic__content {
  font-size: 20px;
}

.bx-statistic--small .bx-statistic__prefix {
  font-size: 14px;
}

.bx-statistic--small .bx-statistic__suffix {
  font-size: 12px;
}

.bx-statistic--large .bx-statistic__content {
  font-size: 36px;
}

.bx-statistic--large .bx-statistic__prefix {
  font-size: 24px;
}

.bx-statistic--large .bx-statistic__suffix {
  font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-statistic {
    padding: 12px;
  }
  .bx-statistic__content {
    font-size: 24px;
  }
}
</style>

